<template>
    <div class="data-page">
        <div class="top-seach">我的资料
            <span class="left" @click="back"></span>
        </div>

        <div class="a-box a">
            <span class="text">头像</span>
            <div class="img"></div>
        </div>
        <div class="a-box a">
            <span class="text">昵称</span>
            <span class="right">张三</span>
        </div>
        <div class="a-box a">
            <span class="text">性别</span>
            <span class="right"></span>
        </div>
        <div class="a-box a">
            <span class="text">职业</span>
            <span class="right"></span>
        </div>
        <div class="a-box a">
            <span class="text">出生年月</span>
            <span class="right"></span>
        </div>
        <div class="a-box a">
            <span class="text">手机号</span>
            <span class="right">139*****354</span>
        </div>
        <div class="a-box a">
            <span class="text">修改密码</span>
            <span class="right"></span>
        </div>
    </div>
    
</template>



<script>

export default {
    data() {
        return {
            kaiguan:false
        }
    },
    methods:{
        kaiqi:function(){
            this.kaiguan = !this.kaiguan;
        },
        back:function(){
            window.history.back(-1);    
        }
    },
    components:{  
        
    }  
}
</script>

<style lang="less" rel="stylesheet/less">
.data-page{
    padding-top:0.88rem;
    padding-bottom:1.88rem;
   .top-seach{
        width:100%;
        height:0.88rem;
        position:fixed;
        top:0;
        left:0;
        z-index:11;
        background:#00D397;
        line-height:0.88rem;
        text-align:center;
        font-size: 0.34rem;
        color: #FFFFFF;
        .left{
            width:0.2rem;
            height:0.37rem;
            display:inline-block;
            position:absolute;
            left:0.22rem;
            top:0.28rem;
            background:url('left.png') no-repeat;
            background-size:100% 100%;
        }
   } 
   .a-box{
        width:100%;
        height:1rem;
        background: #FFFFFF;
        border-bottom:1px solid #E7E7E7;
        position:relative;
        display: flex;
        justify-content: space-between;
        .img{
            width:0.8rem;
            height:0.8rem;
            border-radius:50%;
            position:absolute;
            top:0.1rem;
            right:0.52rem;
            overflow:hidden;
            img{
                width:100%;
                height:100%;
            }
        }
        a{
            width:50%;
            height:100%;
            position:absolute;
            right:0;
            top:0;
        }
        .text{
            font-size: 0.28rem;
            color: #727272;
            line-height:1rem;
            padding-left:0.3rem;
            display:inline-block;
            height:1rem;
        }
        .right{
            font-size: 0.26rem;
            color: #858585;
            padding-right:0.64rem;
            display:inline-block;
            height:1rem;
            line-height:1rem;
        }
        &.a:after{
            content:'';
            display:block;
            width:0.14rem;
            height:0.2rem;
            background:url('right.png') no-repeat;
            background-size:100% 100%;
            position:absolute;
            right:0.3rem;
            top:0.42rem;
        }
   }
}
</style>

